<template>
    <div class="category-filter">
      <div class="filter-container">
        <button 
          v-for="category in categories" 
          :key="category"
          class="filter-button"
          :class="{ active: category === selectedCategory }"
          @click="selectCategory(category)"
        >
          {{ formatCategoryName(category) }}
        </button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits } from 'vue';
  
  const props = defineProps({
    categories: {
      type: Array,
      required: true
    },
    selectedCategory: {
      type: String,
      required: true
    }
  });
  
  const emit = defineEmits(['select']);
  
  const selectCategory = (category) => {
    emit('select', category);
  };
  
  const formatCategoryName = (name) => {
    if (name === 'all') return '全部';
    return name.charAt(0).toUpperCase() + name.slice(1);
  };
  </script>
  
  <style lang="scss" scoped>
  @import '../styles/variables.scss';
  @import '../styles/responsive.scss';
  
  .category-filter {
    margin: 3rem 0 2rem;
    
    .filter-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.8rem;
      
      @include mobile {
        gap: 0.5rem;
      }
    }
    
    .filter-button {
      padding: 0.6rem 1.2rem;
      background-color: white;
      border: 1px solid rgba($text-color, 0.1);
      border-radius: 30px;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.3s ease;
      color: $text-secondary;
      
      @include mobile {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
      }
      
      &:hover {
        border-color: $primary-color;
        color: $primary-color;
        transform: translateY(-2px);
      }
      
      &.active {
        background: linear-gradient(135deg, $primary-color, $accent-color);
        color: white;
        border-color: transparent;
        box-shadow: 0 5px 15px rgba($primary-color, 0.3);
      }
    }
  }
  </style>